import React , {useState} from 'react'
import { AtIcon } from 'taro-ui'
import Taro from '@tarojs/taro'
import {View, Text, ScrollView, Image} from '@tarojs/components'
import {logger} from "redux-logger/src";

export default function RightDetails(){
  // 数据
  const [commList,useCommList] = useState([
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0,
      showMoveTag: false
    },
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0, showMoveTag: false
    },
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0, showMoveTag: false
    }
  ])
  function goToCommdetail(){
    Taro.navigateTo({
      url: '/pages/commdetail/index'
    })
  }
  // 添加到购物车
  function addCommBtn(e,index){
    e.stopPropagation()
    const newCommList = [...commList]
    newCommList[index].commNum += 1
    newCommList[index].showMoveTag = true
    useCommList(newCommList)
  }
  // 减少数量
  function reduceNum(e,index){
    e.stopPropagation()
    const newCommList = [...commList]
    if(newCommList[index].commNum === 1){
      newCommList[index].showMoveTag = false
      newCommList[index].commNum = 0
    } else {
      newCommList[index].commNum -= 1
    }
    useCommList(newCommList)
  }
  return (
    <View className='right_details'>
     {/*上方 筛选*/}
     <View className='right_details_top'>
       <View className='details_top_tag'> 价格 <AtIcon value='arrow-up' size='12' color='#333' /> </View>
       <View className='details_top_tag'> 折扣 <AtIcon value='arrow-up' size='12' color='#333' /></View>
       <View className='details_top_tag'> 筛选 <AtIcon value='list' size='12' color='#333' /> </View>
     </View>
      {/*类别*/}
      <ScrollView scrollX enableFlex className='details_if_tag'>
         <View className='details_if_tag_item'>
            全部
         </View>
        <View className='details_if_tag_item'>
          光明
        </View>
        <View className='details_if_tag_item'>
          伊利
        </View>
        <View className='details_if_tag_item'>
          蒙牛
        </View>
        <View className='details_if_tag_item'>
          全部
        </View>
        <View className='details_if_tag_item'>
          全部
        </View>
        <View className='details_if_tag_item'>
          全部
        </View>
        <View className='details_if_tag_item'>
          全部
        </View>
      </ScrollView>
      {/*下方商品列表详情*/}
      <ScrollView scrollY className='details_if_list'>
        {
          commList.map((item,index) => {
              return (
                <View className='details_if_items' onClick={() => {goToCommdetail()}}>
                  <View className='item_fl'>
                    <Image src={item.img} />
                  </View>
                  <View className='item_fr'>
                    <Text className='item_fr_tit'>{item.tit}</Text>
                    <Text className='item_fr_con'>{item.describe}</Text>
                    <View className='item_fr_tag'>
                      <Text>折扣</Text>
                    </View>
                    {/*onClick={(e) => e.stopPropagation()}*/}
                    <View className='item_fr_boo'>
                      <Text className='new_price'>￥{item.new_price}</Text>
                      <Text className='old_price'>￥{item.old_price}</Text>
                      <View className='comm_de_fr'>
                        <Text className={['reduce_comm_btn', item.showMoveTag? 'move_tag':'no_move_tag']} onClick={(e) => reduceNum(e,index)}>-</Text>
                        <Text className={item.showMoveTag? 'move_tag':'no_move_tag'}>{item.commNum}</Text>
                        <Text className='add_comm_btn' onClick={(e) => addCommBtn(e,index)}>+</Text>
                      </View>
                    </View>
                  </View>
                </View>
              )
          })
        }

      </ScrollView>
    </View>
  )
}
